<template>
  <div id="advertising_manage" class="container">
    <div class="content">
      <div class="title">广告管理</div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              style="width:12%;float: left;"
              v-model="tabledisplayObj.areaKeyId"
              @change="areaChange"
              clearable
              placeholder="投放区域"
            >
              <el-option
                v-for="item in launchAreaList"
                :key="item.valueId"
                :label="item.valueName"
                :value="item.valueIndex"
              ></el-option>
            </el-select>
            <el-select
              style="width:12%;float: left;margin-left:.1rem; "
              v-model="tabledisplayObj.posKeyId"
              clearable
              placeholder="广告位置"
            >
              <el-option
                v-for="item in advertisingPositionList"
                :key="item.valueId"
                :label="item.valueName"
                :value="item.valueId"
              ></el-option>
            </el-select>
            <el-date-picker
              style="width:20%;float: left;margin-left:.1rem; "
              v-model="tabledisplayObj.launchTime"
              type="daterange"
              range-separator="—"
              start-placeholder="投放开始日期"
              end-placeholder="投放结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-input
              v-model="tabledisplayObj.keyWords"
              style="width:12%;float: left;margin-left:.1rem;"
              placeholder="搜索 广告名称"
              class="input_search"
            ></el-input>
            <div @click="initData(1)" class="search_btn" v-if="hasApi('adList')" style="margin-left:0.1rem;">搜索</div>
            <div @click="resetAdvertising()" class="btn_user_defined" style="margin-left:0.1rem;">重置</div>
            <div class="right_btn" v-if="hasApi('adAdd')" @click="createAdvertising">新&nbsp&nbsp增</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 2rem;">序号</td>
                <td style="width: 3rem;">广告名称</td>
                <td style="width: 2rem;">广告图</td>
                <td style="width: 3rem;">内容链接</td>
                <td style="width: 3rem;">投放区域</td>
                <td style="width: 3rem;">广告位置</td>
                <td style="width: 3rem;">投放对象</td>
                <td style="width: 3rem;">投放时间</td>
                <td style="width: 2rem;">投放次数</td>
                <td style="width: 2rem;">广告状态</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in advertisingList">
                <td>{{index+1}}</td>
                <td>{{item.adName}}</td>
                <td>
                  <div class="card_img" :style="{ background:item.adPic_show}"></div>
                </td>
                <td style="word-wrap:break-word;max-width:3rem;">{{item.contentLink}}</td>
                <td>{{item.adReginonModeName}}</td>
                <td>{{item.adPositionName}}</td>
                <td>{{item.campusPutModeName}}</td>
                <td>{{item.useStartTime}}-{{item.useEndTime}}</td>
                <td>{{item.useCount}}</td>
                <td>{{item.adStatusModeName}}</td>
                <td>
                  <span
                    v-if="item.adStatusMode != 1"
                    class="operate_btn"
                    @click="handleLook(index,item)"
                  >查看</span>
                  <span
                    v-if="item.adStatusMode == 1 && hasApi('adAdd')"
                    class="operate_btn"
                    @click="handleUp(index,item)"
                  >上架</span>
                  <span
                    v-if="item.adStatusMode == 2 && hasApi('adAdd')"
                    class="operate_btn"
                    @click="handleDown(index,item)"
                  >下架</span>
                  <span
                    v-if="item.adStatusMode == 1 && hasApi('adAdd')"
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                  >编辑</span>
                  <span
                    v-if="item.adStatusMode != 2 && hasApi('adDelete')"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.curPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.totalCount"
        ></el-pagination>
        <!--新建课程组件\编辑课程组件-->
        <createAdvertising ref="createAdvertising" @callback="closeAdd"></createAdvertising>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import createAdvertising from "./common/createAdvertising";
let vm;
let user;
export default {
  components: {
    createAdvertising
  },
  data() {
    return {
      componentname: "",
      tabledisplayObj: {
        curPage: 1,
        pageSize: 10,
        areaKeyId: "", //投放区域
        posKeyId: "", //广告位置
        launchTime: "", //投放时间
        keyWords: "", //广告名称
        totalCount: 0
      },
      launchAreaList: [], //投放区域数组
      advertisingPositionList: [], //广告位置数组
      campusPutModeList: [], //投放对象数组
      advertisingList: [],//广告数组
      adStatusModeList: [] //广告状态
    };
  },
  methods: {
    //选择投放区域
    areaChange(val) {
      console.log(val);
      api
        .adPostionList({
          areaId: val
        })
        .then(function(data) {
          if (data.result == "操作成功") {
            vm.tabledisplayObj.posKeyId = "";
            vm.advertisingPositionList = data.list;
          } else {
            tool.message({
              showClose: true,
              message: data.result,
              type: "warning"
            });
          }
        });
    },
    campusChange: function(campusId) {},
    /**
     * 初始化数据
     */
    initData(pgIndex) {
      // console.log("initData", vm.tabledisplayObj);
      vm.tabledisplayObj.curPage=pgIndex||vm.tabledisplayObj.curPage;
      let paras = {
        curPage: vm.tabledisplayObj.curPage,
        pageSize: vm.tabledisplayObj.pageSize
      };
      //判断是否筛选字段
      if (vm.tabledisplayObj.areaKeyId != "") {
        paras.areaKeyId = vm.tabledisplayObj.areaKeyId;
      }
      if (vm.tabledisplayObj.posKeyId != "") {
        paras.posKeyId = vm.tabledisplayObj.posKeyId;
      }
      if (vm.tabledisplayObj.launchTime != "") {
        paras.startTime = vm.tabledisplayObj.launchTime[0];
        paras.endTime = vm.tabledisplayObj.launchTime[1];
      }
      if (vm.tabledisplayObj.keyWords != "") {
        paras.keyWords = vm.tabledisplayObj.keyWords;
      }
      //获取广告列表
      api.adList(paras).then(function(data) {
        if (data.result == "操作成功") {
          data.list.forEach(item => {
            let adStatusMode = vm.adStatusModeList.find(function(elem) {
              return item.adStatusMode == elem.value;
            });
            let campusPutMode = vm.campusPutModeList.find(function(elem) {
              return item.campusPutMode == elem.value;
            });
            console.log(campusPutMode);
            //广告状态名称
            item.adStatusModeName =
              adStatusMode == undefined ? "" : adStatusMode.name;
            //投放对象名称
            item.campusPutModeName =
              campusPutMode == undefined ? "" : campusPutMode.name;
            item.useStartTime = item.useStartTime.split(" ")[0];
            item.useEndTime = item.useEndTime.split(" ")[0];
            //当投放区域为4时有两张广告图片，显示第一张广告图片
            if (item.adRegionMode == 4) {
              item.adPic_show =
                "url(" +
                item.adPic.split(",")[0] +
                ") no-repeat center top /1.6rem 0.4rem";
            } else {
              item.adPic_show =
                "url(" + item.adPic + ") no-repeat center top /1.6rem 0.4rem";
            }
          });
          vm.advertisingList = data.list;
          vm.tabledisplayObj.totalCount = data.totalCount;
        } else {
          tool.message({
            showClose: true,
            message: data.result,
            type: "warning"
          });
        }
      });
    },
    /**
     * 新增
     */
    createAdvertising() {
      vm.$refs.createAdvertising.init({});
    },
    /**
     * 新增回调
     */
    closeAdd(data) {
      console.log(data);
      vm.initData();
    },
    /**
     * 上架
     */
    handleUp(index, item) {
      item.adStatusMode = 2;
      api.adAdd(item).then(function(data) {
        if (data.resultCode == 2000) {
          tool.message({
            showClose: true,
            message: "上架成功",
            type: "success"
          });
          vm.initData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 下架
     */
    handleDown(index, item) {
      this.$confirm("此操作将下架该广告, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          item.adStatusMode = 3;
          api.adAdd(item).then(function(data) {
            if (data.resultCode == 2000) {
              tool.message({
                showClose: true,
                message: "下架成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 查看
     */
    handleLook(index,item){
      let cloneItem = tool.clone(item);
      cloneItem.isLook = true;
      vm.$refs.createAdvertising.init(cloneItem);
    },
    /**
     * 编辑
     */
    handleEdit(index, item) {
      vm.$refs.createAdvertising.init(tool.clone(item));
    },
    handleDelete(index, item) {
      this.$confirm("此操作将删除该广告, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            adId: item.adId
          };
          api.adDelete(paras).then(function(data) {
            if (data.result == "操作成功") {
              tool.message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.result);
            }
          });
        })
        .catch(() => {});
    },
    pageSizeChange(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.curPage = val;
      vm.initData();
    },
    /**
     * 重置
     */
    resetAdvertising() {
      vm.tabledisplayObj = {
        curPage: 1,
        pageSize: 10,
        areaKeyId: "", //投放区域
        posKeyId: "", //广告位置
        launchTime: "", //投放时间
        keyWords: "", //广告名称
        totalCount: 0
      };
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    this.adStatusModeList = dicdata["ad_status_mode"]; //广告状态
    this.campusPutModeList = dicdata["ad_campus_mode"]; //广告指定投放对象
    this.initData();
    api
      .adAreaList({})
      .then(function(data) {
        if (data.result == "操作成功") {
          vm.launchAreaList = data.list;
        } else {
          tool.message({
            showClose: true,
            message: data.result,
            type: "warning"
          });
        }
        return api.adPostionList({});
      })
      .then(function(data) {
        if (data.result == "操作成功") {
          vm.advertisingPositionList = data.list;
        } else {
          tool.message({
            showClose: true,
            message: data.result,
            type: "warning"
          });
        }
      });
  },
  computed: {}
};
</script>

<style lang="scss">
#advertising_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .right_btn {
    background-image: url(~@/assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885F8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
	background-color: rgba(56,133,248,0.8);
}
  .el-date-editor .el-range__icon {
    font-size: 0.16rem;
    margin-left: -0.05rem;
    color: #c0c4cc;
    float: left;
    line-height: 0.3rem;
  }

  .card_img {
    width: 1.6rem;
    height: 0.4rem;
    border-radius: 4px;
    background-size: 100% 100%;
  }

  // .el-table__expand-icon .el-icon-arrow-right:before {
  //   content: "\e603";
  // }
  // .el-table__expand-icon--expanded {
  //   -webkit-transform: rotate(180deg);
  //   transform: rotate(180deg);
  // }
  .btn_editor {
    font-size: 0.16rem;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>
